<template>
  <div>

    <el-row>
      <el-col :span="4">&nbsp</el-col>
      <el-col :span="16">

        <div style="height: 20px;"></div>

        <div id="CoachType2">
          <el-input v-model="param.recruitTitle" placeholder="请输入招聘标题" style="width: 20%;"></el-input>
          <el-button type="primary" @click="search" round>搜索</el-button>
          <el-button type="primary" @click="addCoachType" round>发布招聘信息</el-button>
        </div>

        <div style="height: 20px;"></div>

        <el-table :data="page.records" border>
          <el-table-column prop="recruitTitle" label="招聘标题" width="115">
          </el-table-column>
          <el-table-column prop="recruitMessage" label="招聘信息" width="630">
          </el-table-column>
          <el-table-column prop="recruitSalary" label="招聘工资" width="127">
          </el-table-column>
          <el-table-column label="操作" width="150">
            <template #default="scope">

              <el-button @click="deleteRecruit(scope.row.recruitId)" type="text" size="small">删除</el-button>
            </template>
          </el-table-column>

        </el-table>

        <el-dialog title="发布招聘" :visible.sync="showAddCoachType" width="30%">
          招聘标题：<el-input v-model="recruitForm.recruitTitle" placeholder="请输入招聘标题" style="width: 50%;"></el-input><br>
          招聘信息：<el-input v-model="recruitForm.recruitMessage" placeholder="请输入招聘信息"
            style="width: 50%;line-height: 120px;"></el-input><br>
          招聘工资：<el-input-number v-model="recruitForm.recruitSalary" controls-position="right" :min="1"
            placeholder="请输入招聘工资"></el-input-number><br>
          <div style="margin-top: 20px;">
            &nbsp
          </div>
          <el-button type="primary" @click="onSubmit">发布</el-button>
          <el-button @click="showAddCoachType = false">取 消</el-button>
        </el-dialog>


      </el-col>
      <el-col :span="4">&nbsp</el-col>
    </el-row>


    <el-dialog :visible.sync="dialogVisible" title="提示">
      <p>{{ dialogMessage }}</p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "venueRecruit",
    data() {
      return {
        add: {}, // 新增的对象
        showAddCoachType: false, //新增窗口
        recruitForm: {
          recruitTitle: '',
          recruitMessage: '',
          recruitSalary: 0,
        },
        dialogVisible: false,
        dialogMessage: '',
        page: {},
        param: {
          recruitTitle: "",
          pageNum: 1,
          pageSize: 5,
        },
      };
    },
    methods: {
      //删除按钮
      deleteRecruit(recruitId) {
        this.$http.get("/venue/yRecruit/cancelRecruit", {
          params: {
            recruitId: recruitId
          }
        }).then(resp => {
          this.$message({
            message: resp.data.msg,
            type: 'success'
          });
          this.loadMyRecruit();
        })
      },
      //新增窗口
      addCoachType() {
        this.showAddCoachType = true;
      },
      //搜索按钮
      search() {
        this.param.pageNum = 1;
        this.loadMyRecruit();
      },
      //查询自己发布的招聘
      loadMyRecruit() {
        this.$http.get("/venue/yRecruit/VenueLoadMyRecruit", {
          params: this.param
        }).then(resp => {
          this.page = resp.data.data;
        })
      },
      //场馆新增招聘信息
      onSubmit() {
        this.$http.post("/venue/yRecruit/addRecruit", this.recruitForm).then(resp => {
          this.$message({
            message: resp.data.msg,
            type: 'success'
          });
          this.recruitForm = {
            recruitTitle: '',
            recruitMessage: '',
            recruitSalary: 0,
          };
          this.showAddCoachType = false;
          this.loadMyRecruit();
        });
      },
    },
    created() {
      this.loadMyRecruit();
    }

  };
</script>

<style>
</style>
